<template>
  <a-modal
    :title="title"
    width="30%"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    @cancel="()=>{this.visible=false}"
  >
    <template>
      <div class="UploadFiles" :key="FileKey">
        <a-upload
          list-type="picture"
          :multiple="false"
          :action="$rootUrl+leading"
          :headers="headers"
          @change="handleChange"
          class="uploadCL"
          :before-upload="beforeUpload">
          <a-button class="uploadBT" type="primary">
            <a-icon type="upload" />
            上传文件
          </a-button>
        </a-upload>
      </div>
    </template>
  </a-modal>
</template>
<script>
import Token from '../../utils/cache/TokenCache'

export default {
  components: {
    Token
  },
  props: {
    parentObj: Object,
    leading: { type: String, required: false }
  },
  data () {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      loading: false,
      title: '',
      FileKey: '',
      uploadData: {
        TypeName: this.typeName,
        Remark: this.remark
      },
      headers: {
        authorization: 'Bearer ' + Token.getToken()
      },
      fileInfo: {
        maxsize: 1024 * 1024 * 100,
        filetype: ['jpg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'zip', 'rar', 'pdf', '7z']
      }
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.FileKey = ''
      } else {
        this.FileKey = Math.random()
      }
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    openForm (title) {
      this.init()
      this.title = title
    },
    beforeUpload (file) {
      console.log(file)
      const isLt100M = file.size / 1024 / 1024 > this.fileInfo.maxsize
      if (isLt100M) {
        this.fileStatus = false
        this.$message.warning(
          '上传附件大小不能超过' + this.fileInfo.maxsize + 'M。'
        )
        return isLt100M
      }
      const index = file.name.lastIndexOf('.')
      const suffix = file.name.substring(index + 1)
      const isTYpe = this.fileInfo.filetype.indexOf(suffix) < 0
      if (isTYpe) {
        this.$message.warning(
          '上传的文件格式不符合要求'
        )
        return isTYpe
      }
      return true
    },
    handleChange (info) {
      console.log(info)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response.Success === false || info.file.response.status === 'error') {
          this.$message.error(`${info.file.name}文件,${info.file.response.Msg},请检查文件内容！ `)
          this.visible = false
        } else {
          this.$message.success(`${info.file.response.name}  文件上传成功！`)
          console.log(info.file.response.status)
          this.parentObj.uploadFileURL = info.file.response.url
          this.parentObj.UpdateSaveFileUrl()
          this.visible = false
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 文件上传失败！`)
        this.visible = false
      }
    }
  }
}
</script>
<style scoped>
.UploadFiles {
  width: 100%;
  text-align: center;
  margin: 30px auto;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.uploadCL {
  width: 100%;
  text-align: left;
  margin: 5px auto;
}

.uploadBT {
  width: 100%;
  margin: 20px auto;
}
</style>
